<template>
  <div class="inputNum" @change="pricechange">
    <button
      type="button"
      :disabled="num <= Number(min) ? true : false"
      @click.stop="reduce"
      class="butt"
      :class="num <= Number(min) ? 'hoverMouse' : ''"
    >
      <i class="el-icon-minus"></i>
    </button>
    <input
      :placeholder="priceType == 3 && direction == '1' ? $t('account.index_dialog.56hq45s5wkk0') : priceType == 3 && direction == '2' ? $t('account.index_dialog.56hwwqs5wkk0') : ''"
      class="input__inner"
      v-model="num"
      type="number"
      title=" "
      @blur="handleBlur"
    />
    <button v-if="priceType != 3" type="button" @click.stop="add" class="butt">
      <i class="el-icon-plus"></i>
    </button>
    <button
      v-else
      :disabled="num >= Number(max) ? true : false"
      :class="num >= Number(max) ? 'hoverMouse' : ''"
      type="button"
      @click.stop="add"
      class="butt"
    >
      <i class="el-icon-plus"></i>
    </button>
  </div>
</template>

<script>
export default {
  name: "InputNumber",
  props: {
    currenPrice: String,
    priceType: Number,
    direction: Number
  },
  data() {
    return {
      num: "",
      steps: {
        step: [0.001, 0.005, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5], // 计步器步数数组
        section: [
          0.01,
          0.25,
          0.5,
          10,
          20,
          100,
          200,
          500,
          1000,
          2000,
          5000,
          9995,
        ], // num范围区间
      },
      index: 0,
      flag: false,
      max: 9995,
      min: 0,
      disabled: false, // 控制是否可点击加号
    };
  },
  methods: {
    // 判断num的值所在的区间
    judge() {
      if(parseFloat(this.num) == 0) this.num = 0.01;
      let val = parseFloat(this.num);
      let length = this.steps.section.length;
      let section = this.steps.section;
      if (val >= 0.01 && val <= 9995) {
        let i = 0;
        while (i <= length - 1) {
          if (section[i] > val) {
            // 判断num是否等于数组中的值
            this.flag = true;
            this.index = i;
            return;
          } else if (section[i] == val) {
            this.index = i;
            // num为数组中的一个
            this.flag = false;
            return;
          } else i++;
        }
      } else if (val < 0.01) {
        this.num = (0.01).toFixed(3);
        // 股票价格不得小于0.01
        return this.$message.error(
          `${this.$i18n.t("m.stockPriceError1")} 0.01`
        );
      } else {
        this.num = (9995).toFixed(2);
        // 股票价格不得大于9995
        return this.$message.error(
          `${this.$i18n.t("m.stockPriceError2")} 9995`
        );
      }
    },
    reduce() {
      // index初始化
      this.index = 0;
      if (this.num == "") this.num = this.stockInfo.detail.latestPrice;
      this.judge();
      let val = parseFloat(this.num);
      // flag为true时表示不等于数组中的任何值
      // num在section的范围内
      if (this.flag) {
        // 如果index小于2，步数计数为三位小数，否则为两位小数
        if (this.index <= 2) {
          val =
            (Math.round(val * 1000) - this.steps.step[this.index - 1] * 1000) /
            1000;
          this.num = (Math.round(val * 1000) / 1000).toFixed(3);
        } else {
          val =
            (Math.round(val * 100) - this.steps.step[this.index - 1] * 100) /
            100;
          this.num = (Math.round(val * 100) / 100).toFixed(2);
        }
        // 如果num等于section中的一项
      } else {
        // 股价为0.01时无法减少
        if (this.index === 0) {
          this.num = (0.01).toFixed(3);
          // 股票价格不得小于0.01
          return this.$message.error(
            `${this.$i18n.t("m.stockPriceError1")} 0.01`
          );
        } else {
          if (this.index <= 2) {
            val =
              (Math.round(val * 1000) -
                this.steps.step[this.index - 1] * 1000) /
              1000;
            this.num = (Math.round(val * 1000) / 1000).toFixed(3);
          } else {
            val =
              (Math.round(val * 100) - this.steps.step[this.index - 1] * 100) /
              100;
            this.num = (Math.round(val * 100) / 100).toFixed(2);
          }
        }
      }
    },
    add() {
      this.index = 0;
      if (this.num == "") this.num = this.stockInfo.detail.latestPrice;
      this.judge();
      let val = parseFloat(this.num);
      // flag为true时表示不等于数组中的任何值
      if (this.flag) {
        // 如果index小于2，步数计数为三位小数，否则为两位小数
        if (this.index <= 2 && this.index > 0) {
          val =
            (Math.round(val * 1000) + this.steps.step[this.index - 1] * 1000) /
            1000;
          this.num = (Math.round(val * 1000) / 1000).toFixed(3);
        } else {
          val =
            (Math.round(val * 100) + this.steps.step[this.index - 1] * 100) /
            100;
          this.num = (Math.round(val * 100) / 100).toFixed(2);
        }
      } else {
        // flag为false时表示等于数组中的其中一个值
        // 股价为9995时无法增加
        if (this.index === this.steps.section.length - 1) {
          this.num = (9995).toFixed(2);
          // 股票价格不得大于9995
          return this.$message.error(
            `${this.$i18n.t("m.stockPriceError2")} 9995`
          );
        } else if (this.index < this.steps.section.length - 1) {
          if (this.index < 2) {
            val =
              (Math.round(val * 1000) + this.steps.step[this.index] * 1000) /
              1000;
            this.num = (Math.round(val * 1000) / 1000).toFixed(3);
          } else if (
            this.index >= 2 &&
            this.index < this.steps.section.length - 1
          ) {
            val =
              (Math.round(val * 100) + this.steps.step[this.index] * 100) / 100;
            this.num = (Math.round(val * 100) / 100).toFixed(2);
          }
        }
      }
    },
    // 触发焦点事件
    handleBlur() {
      if (this.num >= this.max) {
        this.num = Number(this.max).toFixed(2);
        return;
      }
      if(this.num <= this.min) {
        this.num = Number(this.min).toFixed(2);
        return;
      }
      // 判断股票价格是否正确
      if(this.num == "" || this.num == NaN || this.num == null || this.num == undefined) return
      this.judge();
      // 股票价格不能位空
      // 输入框失去焦点时判断输入框中的值是否符合验证规则
      let val = parseFloat(this.num);
      if (val < 0.01) {
        this.num = (0.01).toFixed(3);
        // 股票价格不得小于0.01
        return this.$message.error(
          `${this.$i18n.t("m.stockPriceError1")} 0.01`
        );
      } else if (val === 0.01)
        return (this.num = (Math.round(val * 1000) / 1000).toFixed(3));
      else if (val > 0.01 && val <= 0.5) {
        val =
          (val * 1000 -
            ((val * 1000) % (this.steps.step[this.index - 1] * 1000))) /
          1000;
        this.num = (Math.round(val * 1000) / 1000).toFixed(3);
      } else if (val > 0.5 && val <= 9995) {
        val =
          (val * 100 -
            ((val * 100) % (this.steps.step[this.index - 1] * 100))) /
          100;
        this.num = (Math.round(val * 100) / 100).toFixed(2);
      } else if (val > 9995) {
        this.num = (9995).toFixed(2);
        // 股票价格不得大于9995
        return this.$message.error(
          `${this.$i18n.t("m.stockPriceError2")} 9995`
        );
      }
    },
    // 价格改变触发父组件事件
    pricechange() {
      this.$emit("priceNumber", this.num);
    },
  },
  mounted() {
    // 当传进来的参数大于0.5时，显示两位小数，小于等于0.5时显示三位小数
    if (this.currenPrice > 0.5)
      this.num = parseFloat(this.currenPrice).toFixed(2);
    else this.num = parseFloat(this.currenPrice).toFixed(3);
  },
  watch: {
    currenPrice: {
      handler(val) {
        this.num = val;
      },
    },
    num: {
      handler(val) {
        this.$emit("priceNumber", val);
      },
    },
    // 监视方向的改变
    // direction: {
    //   handler(val) {
    //     // 买入方向
    //     if (val == 1 && this.priceType == 3) {
    //       // 限价单
    //       this.max = 9995;
    //       this.min = this.stockInfo.detail.latestPrice;
    //     }else if(val == 2 && this.priceType == 3){
    //       // 卖出方向
    //       this.max = this.stockInfo.detail.latestPrice;
    //       this.min = 0.01;
    //     }
    //     else {
    //       this.max = 9995;
    //       this.min = 0.01;
    //     }
    //   },
    // },
    // priceType: {
    //   handler(val) {
    //     // 买入方向
    //     if (val == 3 && this.direction == 1) {
    //       // 限价单
    //       this.max = 9995;
    //       this.min = this.stockInfo.detail.latestPrice;
    //     }else if(val == 3 && this.direction == 2){
    //       // 卖出方向
    //       this.max = this.stockInfo.detail.latestPrice;
    //       this.min = 0;
    //     }
    //     else {
    //       this.max = 9995;
    //       this.min = 0;
    //     }
    //   },
    // },
  },
  computed: {
    stockInfo() {
      return this.$store.state.index.stockInfo;
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/less/drawer.less";
.inputNum {
  display: flex;
  background: @bgColor;
  width: 100%;
  height: 30px;
  .input__inner {
    flex: 1;
    background: @bgColor;
    border: transparent;
    border-left: 1px solid @DarkBorderLine;
    border-right: 1px solid @DarkBorderLine;
    color: @fff;
    font-size: 12px;
    text-align: center;
  }
  .butt {
    background: @bgColor;
    border-color: @bgColor;
    border: 1px;
    border-radius: 3px;
    color: @fbSix;
    // margin: 5px 0;
    height: 30px;
    line-height: 30px;
    width: 40px;
    cursor: pointer;
  }
  .hoverMouse {
    cursor: not-allowed;
  }
}
</style>
